<template>
  <div class="apply-reward">
    <TitleBar :title="title" :backFunction="goBack"></TitleBar>
    <section class="tips">
      <p>请按照“免费申请奖牌证书”输入提示填写相关信息，我们将对您的资质信息进行数字化保密</p>
    </section>
    <section v-show="step == 1">
      <RewardOne ref="one" @onErrShow="showTemplate" @onStep="onStep" />
    </section>
    <section v-show="step == 2">
      <RewardTwo ref="two" @onErrShow="showTemplate" @onMsgText="onMsgText" />
    </section>
    <section class="submit-box">
      <button class="service" @click="onShowMenu">
        <span class="phone"></span>
        客服
      </button>
      <button class="next" @click="next">{{btnText}}</button>
    </section>
    <vodal :show="templateShow" animation="zoom" @hide="templateShow = false" measure="rem" :width="6" :height="height" :closeButton="false">
      <div ref="template">
        <PromptFrame :errType="true" :msgText="msgText" @onClose="onClose"></PromptFrame>
      </div>
    </vodal>
    <VoteMenu v-show="showMenu" :onlyService="true" @closeMenu="onCloseMenu"></VoteMenu>
  </div>
</template>

<script>
import TitleBar from '../../components/TitleBar'
import RewardOne from './components/RewardOne'
import RewardTwo from './components/RewardTwo'
import PromptFrame from '../../components/PromptFrame'
import VoteMenu from '../../components/VoteMenu'
import scroll from '../../mixins/scroll'
import { mapState } from 'vuex'

export default {
  mixins: [scroll],
  components: {
    TitleBar,
    RewardOne,
    RewardTwo,
    VoteMenu,
    PromptFrame
  },
  data() {
    return {
      title: '免费申请奖牌证书（1/2）',
      btnText: '下一步',
      showMenu: false, // 是否显示菜单
      step: 1,
      templateShow: false,
      height: 7.6,
      msgText: '申请奖牌证书内容有误，请仔细检查并重新填写！'
    }
  },
  computed: {
    ...mapState({
      wxqr: s => s.serviceInfo.wxqr
    })
  },
  watch: {
    templateShow(newVal) {
      if (newVal && this.wxqr) {
        this.height = 7.6
      } else {
        this.height = 5
      }
    }
  },
  methods: {
    next() {
      if (this.step == 1) {
        // 调第一页的提交方法
        this.$refs.one.next()
      } else {
        // 调第二页的提交方法
        this.$refs.two.submit()
      }
    },
    goBack() {
      if (this.step == 2) {
        this.step = 1
        this.btnText = '下一步'
        this.title = '免费申请奖牌证书（1/2）'
      } else {
        this.$router.back()
      }
    },
    onStep(e) {
      if (e == 2) {
        this.step = 2
        this.title = '免费申请奖牌证书（2/2）'
        this.btnText = '生成申请表并发送至邮箱'
        window.scrollTo(0, 0)
      }
    },
    showTemplate(e) {
      this.msgText = '申请奖牌证书内容有误，请仔细检查并重新填写！'
      this.templateShow = e
    },
    onMsgText(e) {
      this.templateShow = true
      this.msgText = e
    },
    onClose(e) {
      this.templateShow = false
    },
    // 显示菜单
    onShowMenu() {
      this.showMenu = true
      this.scroll(false)
    },
    // 关闭弹出菜单
    onCloseMenu() {
      this.showMenu = false
      this.scroll(true)
    }
  },
  destroyed() {
    window.sessionStorage.removeItem('applyForm')
  }
}
</script>
<style lang='scss' scoped>
.apply-reward {
  background-color: #f6f6f6;
  .tips {
    width: 100%;
    padding: 0.16rem 0.3rem;
    background: rgba(252, 237, 180, 1);
    p {
      font-size: 0.22rem;
      color: rgba(188, 144, 58, 1);
      letter-spacing: 0.01rem;
      line-height: 0.3rem;
    }
  }
  .submit-box {
    margin-top: -0.2rem;
    width: 100%;
    height: 1.9rem;
    background: #fff;
    padding: 0.3rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    button {
      height: 0.82rem;
      line-height: 0.82rem;
      font-size: 0.34rem;
      color: rgba(255, 255, 255, 1);
      border-radius: 0.1rem;
    }
    .service {
      width: 2rem;
      background: rgba(115, 158, 251, 1);
      .phone {
        display: inline-block;
        vertical-align: middle;
        width: 0.34rem;
        height: 0.34rem;
        background: url(../../assets/img/phone-icon.png) center no-repeat;
        background-size: cover;
      }
    }
    .next {
      width: 4.6rem;
      background: rgba(220, 196, 89, 1);
    }
  }
}
</style>
